<!-- 批量用户储值 -->
<template>
  <div class="batch_deposit_import">
    <el-container class="base_details_container">
      <BackTitleView title="批量用户储值" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title_button">
              <div class="tb_title">导入用户积分信息</div>
              <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
            </div>
            <div class="base_details_content_second">
              <el-upload ref="upload" :action="url" accept=".xls,.xlsx" :name="name" :headers="headers"
                :on-success="uploadSuccess" :limit="1" drag>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将Excel表格拖到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    <div>注意：</div>
                    <div>1.Excel文件上传完成后点击下方导入</div>
                    <div>2.请严格按照Excel表格模板录入信息</div>
                    <div>3.不要改动Excel表格模板格式</div>
                  </div>
                </template>
              </el-upload>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">取消</el-button>
        <el-button @click="checkForm" type="primary">导入</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { UploadFilled } from '@element-plus/icons-vue'
import $ from "@util/base";
import { ref } from "vue";
import { UPLOAD_FILE_URL } from "@net/url"
import auth from "@net/auth"
import { $msg, $box } from "@ui/msg";
import useRoute from "@util/router";
import api from "@api/points";
const route = useRoute();

const url = UPLOAD_FILE_URL

// 上传文件字段名
const name = 'file_data'

const headers = { accessToken: auth.getToken() }

function downloadTemplate() {
  api.downloadTemplate(val => {
    $.download(val.url, "批量用户积分导入模板")
  })
}

const file = ref(null)
const upload = ref(null)

function uploadSuccess(response) {
  if (response.code === 0) {
    file.value = response.data.fileUrl
  }
}

function checkForm() {
  if ($.isEmpty(file.value)) {
    $msg.error("请上传Excel表格");
  } else {
    console.log(file.value)
    api.importDeposit(file.value, val => {
      $msg.succ("导入成功");
      upload.value.clearFiles();
      back()
    }, msg => {
      $box.open("提示", msg);
      upload.value.clearFiles();
    })
  }
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss" scoped>
.batch_deposit_import {
  height: 100%;
}
</style>
